<template>
    <div id="recommend">
        <img src="../../static/images/t5.jpg" alt="" id="zzjh">
        <ul>
            <li v-for="item in recommendlist" :key="item.id">
                <dl>
                    <dt><img :src="require(`../../${item.src}`)"></dt>
                    <dd :style="{color:item.color}">{{item.title}}</dd>
                </dl>
            </li>
            
        </ul>
    </div>
</template>
<script>
export default{
    name:"zRecommend",
    data(){
        return {
            recommendlist:[{id:1,title:"Live",src:"static/images/live.png",color:"yellow"},
            {id:2,title:"书店",src:"static/images/book.png",color:"green"},
            {id:3,title:"圆桌",src:"static/images/dist.png",color:"skyblue"},
            {id:4,title:"专栏",src:"static/images/pencil.png",color:"skyblue"},
            {id:5,title:"付费咨询",src:"static/images/chat.png",color:"blue"},
            {id:6,title:"百科",src:"static/images/wiki.png",color:"blue"},
            ]
            
            }
            
    }
}
</script>
<style scoped>
#recommend{
    width: 300px;
    background-color: white;
    
}
#zzjh{
    width: 300px;
}
ul{
   display: flex;
   padding: 10px;
   flex-wrap: wrap;
}
li{
    list-style: none;
   
    flex-basis: 90px;

}
dl{
    display: flex;
    flex-direction: column;
    text-align: center;
}
</style>